<template>
  <view class="groupChat">
    <!-- 头部 -->
    <view class="topbox">
      <view class="top-top">
      </view>
      <view class="topitem">
        <view style="width: 20%;position: relative;">
          <image src="../../static/resort/fanhui.png" mode="" style="width: 18rpx;height: 36rpx;" @click="toindex()">
          </image>
        </view>
        <view class="toptit">
          <view class="flex">
            <view class="text">
              这是个社群(240)
            </view>
            <image src="../../static/message/donotdisturb.png" mode="" class="lingdang"></image>
          </view>
          <view class="huise">
            备注名称显示
          </view>
        </view>
        <view style="width: 20%;text-align: right;">
          <image src="../../static/message/three_drop.png" style="width: 40rpx;height: 14rpx;" mode=""
            @click="tomessage()"></image>
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <view style="height: 150rpx;">

    </view>
    <!-- // 聊天内容 -->
    <view class="content-chat">
      <view class="time">
        昨天11:22
      </view>
      <view class="chat ">
        <view class="flex ">
          <view class="hend">
            <image src="../../static/resort/video/img1.png" class="img1" mode=""></image>
            <image src="../../static/message/sex_woman.png" mode="" class="man"></image>
          </view>
          <view class="chatlist">
            <view class="chatname">
              隔壁美女小美
            </view>
            <view class="chatcon">
              王哥，昨天定的番茄还要吗?
            </view>
          </view>
        </view>
        <!-- 男人 -->
        <view class="flex ">
          <view class="hend">
            <image src="../../static/resort/video/img2.png" class="img1" mode=""></image>
            <image src="../../static/message/sex_woman.png" mode="" class="man"></image>
          </view>
          <view class="chatlist ">
            <view class="chatname">
              莉莉安
            </view>
            <view class="chatcon">
              昨天订货的很多，今天如果不要的话可能要等到N天之后了，抓紧机会啊!

            </view>
          </view>
        </view>
        <!-- 男人 -->
        <!-- 时间 -->
        <view class="time">
          8:22
        </view>
        <!-- 时间 -->
        <!-- 自己 -->
        <view class="flex chatright" @click="togroupguanlimessage">

          <view class="chatlist chatlistright">
            <view class="chatcon1">
              暂时先不要了
            </view>
            <view class="yinyong">
              隔壁美女小李:昨天订货的很多,今天如果不要的话可能要等到N天之后了,抓紧机会啊!昨天订货的很多，今天....

            </view>
          </view>
          <view class="hend">
            <image src="../../static/resort/video/img2.png" class="img1" mode=""></image>
            <image src="../../static/message/sex_woman.png" mode="" class="man"></image>
          </view>
        </view>
        <!-- 自己 -->
        <!-- 时间 -->
        <view class="time">
          11:36
        </view>
        <!-- 时间 -->
        <!-- 邀请 -->
        <view class="invite">
          <view class="huise">
            “<text class="blue">隔壁美女小李</text>”邀请“<text class="blue"> 豆豆</text>”加入了群聊
          </view>
          <view class="huise">
            “豆豆”与群里其他人都不是朋友关系,请注意朋友关系
          </view>
        </view>
        <!-- 邀请 -->
        <!-- 美女 -->
        <view class="flex ">
          <view class="hend">
            <image src="../../static/resort/video/img1.png" class="img1" mode=""></image>
            <image src="../../static/message/sex_woman.png" mode="" class="man"></image>
          </view>
          <view class="chatlist">
            <view class="chatname">
              隔壁美女小美
            </view>
            <image src="../../static/message/message_video.png" mode="" class="video"></image>
          </view>
        </view>
        <!-- 美女 -->

      </view>
    </view>
    <!-- // 聊天内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    methods: {
      tomessage() {
        uni.navigateTo({
          url: "/pages/message/groupMessage"
        })
      },
      togroupguanlimessage() {
        uni.navigateTo({
          url: "/pages/message/groupManagementMessage"
        })
      },
      toindex() {
        uni.navigateBack({
          delta: 1
        });
      }
    }
  }
</script>

<style lang="scss">
  // 头部
  .topbox {
    width: 100vw;
    background-color: white;
    position: fixed;
    z-index: 99;

    .top-top {
      width: 100%;
      height: var(--status-bar-height);
    }

    .topitem {
      border-bottom: solid 2rpx #E5E5E5;
      width: 100%;
      height: 110rpx;
      background-color: white;
      display: flex;
      padding: 20rpx 50rpx;
      box-sizing: border-box;
      align-items: center;

      .addfriend {
        position: absolute;
        top: 50rpx;
        left: 0;
        background-color: #505050;
        width: 240rpx;
        height: 220rpx;
        border-radius: 20rpx;

        .afone {
          color: white;
          height: 50%;
          width: 100%;
          text-align: center;
          font-size: 30rpx;
          line-height: 120rpx;
          border-bottom: solid #F5F5F5 2rpx;
        }

        .aftwo {
          color: white;
          height: 50%;
          width: 100%;
          text-align: center;
          font-size: 30rpx;
          line-height: 120rpx;
        }
      }

      .toptit {
        width: 60%;
        text-align: center;
        // margin: auto;

        .flex {
          margin-top: 10rpx;
          // border: 1px solid #505050;
          margin: auto;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;

          .text {
            font-size: 33rpx;
            margin-right: 10rpx;
          }

          .lingdang {
            width: 32rpx;
            height: 32rpx;
          }
        }

        .huise {
          font-size: 23rpx;
          color: #999;
        }
      }
    }
  }

  // 头部
  // 聊天内容
  .content-chat {
    width: 90vw;
    margin: auto;

    .time {
      color: rgb(150, 150, 150);
      text-align: center;
      font-family: Noto Sans SC;
      font-size: 24rpx;
      margin-bottom: 30rpx;
    }

    .chat {
      .flex {
        display: flex;

        width: 85%;
        // border: 1rpx solid;
        margin-bottom: 25rpx;
      }

      .chatright {
        width: 100%;
        // margin: auto;
        justify-content: flex-end;
      }

      .rightall {
        // border: 1px solid;
        display: flex;
        // justify-content: right;
        // margin-left: 50%;
      }

      .hend {
        height: 100rpx;
        position: relative;

        .img1 {
          width: 92rpx;
          height: 92rpx;
        }

        .man {
          width: 28rpx;
          height: 28rpx;
          position: absolute;
          top: 70%;
          left: -5%;
        }
      }

      .chatlist {
        margin: 0 20rpx;
      }

      .chatlistright {
        // border: 1px solid;
        text-align: right;
        // padding: 0;
        // display: flex;
        // justify-content: flex-end;
      }

      .chatname {
        color: rgb(150, 150, 150);
        font-size: 24rpx;
        margin-bottom: 10rpx;

      }

      .chatname {
        color: rgb(150, 150, 150);
        font-size: 24rpx;
        margin-bottom: 10rpx;

      }

      .video {
        width: 280rpx;
        height: 460rpx;
      }

      .chatcon {
        font-size: 32rpx;
        background-color: #fff;
        padding: 15rpx 20rpx;
        border-radius: 20rpx;
        margin-bottom: 15rpx;
      }

      .chatcon1 {
        margin-left: 290rpx;
        font-size: 32rpx;
        background-color: #fff;
        padding: 15rpx 20rpx;
        border-radius: 20rpx;
        margin-bottom: 15rpx;

        width: 27vw;
        text-align: right;
      }

      .yinyong {
        background-color: #E6E6E6;
        padding: 10rpx 10rpx;
        border-radius: 10rpx;
        text-align: left;
      }
    }

    // <!-- 邀请 -->
    .invite {
      margin: 10rpx 0;

      .huise {
        text-align: center;
        padding: 10rpx 0 15rpx;
        font-size: 27rpx;
        color: rgb(181, 181, 181);

        .blue {
          color: rgb(0, 150, 250);
        }
      }
    }

    // <!-- 邀请 -->
  }

  // 聊天内容
</style>